<template>
    <div class="myattention">
        <!-- <Header :isBack="isBack" v-bind:title="title"></Header> -->
        <div class="header padding-24 space-between " >
            <div class="h-back" @click="goBack"><img :src="back" alt=""></div>
            <div class="title fs-36">{{title}}</div>
            <div class="h-share" @click="gotoadd"><img :src="add" alt=""></div>
            <div class="h-right"><img :src="play" alt=""></div>
        </div>
        <div class="list">
            <div class="list-item bg-f padding-24 space-between" v-for="(item,index) in attentionlist" :key="index">
                <div class="left">
                    <img :src="item.user_avator" alt="" class="cove" @click="gotouserinfo(item.user_love_id)">
                    <!-- <span class="point bg-r" v-if="item.news==true"></span> -->
                    <div class="loge" v-if="item.is_singer==1||item.isvip==1">
                        <img :src="musicer" alt="" v-if="item.is_singer==1">
                        <img :src="vip" alt="" v-if="item.isvip==1&&item.is_singer==2">
                    </div>
                </div>
                <div class="right flex-column">
                    <div class="space-between">
                        <p class="fs-32">{{item.nickname}}</p>
                        <img :src="more" alt="" @click="domore(item)">
                    </div>
                    <p class="fs-24 color-6 overFlow">{{item.created_at}}</p>
                </div>
            </div>
        </div>
        <div class="noFan" v-show="attentionlist.length === 0">您目前还未关注过人额~~~</div>
        <div class="more-box" @touchmove.prevent v-if="morebox" @click="morebox=false">
            <div class="box-content padding-24 bg-f">
                <p class="title fs-36">{{user.nickname}}</p>
                <div class="item center-col">
                    <img :src="sendmsg" alt="" class="msg">
                    <p class="fs-32">发私信</p>
                </div>
                <div class="item center-col" @click.stop="tocollect">
                    <img :src="cancelgz" alt="" class="gz">
                    <p class="fs-32">取消关注</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'我关注的人',
            morebox:false,
            back:require('../../assets/index/back-pic.png'),
            play:require('../../assets/public/musicbar.png'),
            add:require('../../assets/account/addpeople.png'),
            musicer:require('../../assets/account/musicer.png'),
            vip:require('../../assets/account/vip.png'),
            more:require('../../assets/index/more.png'),
            sendmsg:require('../../assets/account/sendmsg.png'),
            cancelgz:require('../../assets/account/cancelgz.png'),
            attentionlist:[
                // {
                //     cove:require("../../assets/image/cove.png"),
                //     news:true,
                //     ismusicer:true,
                //     isvip:true,
                //     name:'磨人的小妖精1',
                //     text:'这是一个磨人的小妖精，真的很磨人。'
                // },
                
            ],
            user:''
        }
    },
    created(){
        this.getmyfocuslist()
    },
    methods:{
        getmyfocuslist(){
            var url = this.$host1 + `home/friend/loveUser`;
                this.$axios.get(url).then(res => {
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.attentionlist=resData.data
                } else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        goBack(){
            this.$router.go(-1);
        },
        domore(i){
            this.morebox=true
            this.user=i
        },
        tocollect(){
            let url = this.$host1 + `home/friend/eachAttention`
            var data={
                user_love_id:this.user.user_love_id
            }
            this.$axios.post(url,data).then(res => {
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.AlertWin("操作成功！");
                    this.getmyfocuslist()
                    this.morebox=false
                }else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        gotoadd(){
            this.$router.push('/addattention')
        },
        gotouserinfo(i){
            this.$router.push({
                path: '/singerhome',
                query: {
                    user_id: i,
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.myattention{
    .header{
        background-color: #f8f8f8;
        width: 100%;
        height: 1rem;
        .h-back{
            width: 0.15rem;
            height: 0.26rem;
            img{
                transform: rotate(180deg);
                width: 100%;
            }
        }
        .title{
            font-size: 0.36rem;
            font-weight: bold;
        }
        .h-right{
            width: 0.38rem;
            height: 0.5rem;
            img{
                display: inline-block;
                width: 100%;
            }
        }
        .h-share{
            position: absolute;
            right: 1rem;
            width: 0.45rem;
            height: 0.43rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .list{
        width: 100%;
        height: auto;
        margin-top: 1rem;
        .list-item{
            height: 1.4rem;
            border-bottom: 0.01rem solid #e9e9e9;
            .left{
                width: 0.9rem;
                height: 0.9rem;
                position: relative;
                .cove{
                    width: 0.9rem;
                    height: 0.9rem;
                    border-radius: 50%;
                    object-fit: cover;
                }
                .point{
                    width: 0.16rem;
                    height: 0.16rem;
                    position: absolute;
                    border-radius: 50%;
                    right: 0;
                    top: 0;
                }
                .loge{
                    width: 0.32rem;
                    height: 0.32rem;
                    position: absolute;
                    border-radius: 50%;
                    bottom: 0;
                    right: 0;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .right{
                width: calc(100% - 1.1rem);
                height: 0.9rem;
                img{
                    width: 0.08rem;
                    height: 0.32rem;
                }
            }
        }

    }
    .more-box{
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        .box-content{
            height: 3.5rem;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 0.2rem 0.2rem 0 0;
            .title{
                line-height: 1.4rem;
                border-bottom: 0.01rem solid #e9e9e9;
            }
            .item{
                height: 1rem;
                border-bottom: 0.01rem solid #e9e9e9;
                .msg{
                    width: 0.45rem;
                    height: 0.32rem;
                    margin-right: 0.2rem;
                }
                .gz{
                    width: 0.37rem;
                    height: 0.4rem;
                    margin-right: 0.2rem
                }
            }
        }
    }
    .noFan{
        width:100%;
        padding:30px 0;
        margin-top:1rem;
        text-align: center;
        color:gray;
        font-size:15px;
    }
}
</style>
